<!DOCTYPE html>
<html lang="en">
  <head>
    <title>DemoExpandingCollection  Reference</title>
    <link rel="stylesheet" type="text/css" href="css/jazzy.css" />
    <link rel="stylesheet" type="text/css" href="css/highlight.css" />
    <meta charset='utf-8'>
    <script src="js/jquery.min.js" defer></script>
    <script src="js/jazzy.js" defer></script>
    
  </head>
  <body>
    <a title="DemoExpandingCollection  Reference"></a>
    <header>
      <div class="content-wrapper">
        <p><a href="index.html">DemoExpandingCollection Docs</a> (100% documented)</p>
      </div>
    </header>
    <div class="content-wrapper">
      <p id="breadcrumbs">
        <a href="index.html">DemoExpandingCollection Reference</a>
        <img id="carat" src="img/carat.png" />
        DemoExpandingCollection  Reference
      </p>
    </div>
    <div class="content-wrapper">
      <nav class="sidebar">
        <ul class="nav-groups">
          <li class="nav-group-name">
            <a href="Classes.html">Classes</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Classes/BasePageCollectionCell.html">BasePageCollectionCell</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/ExpandingTableViewController.html">ExpandingTableViewController</a>
              </li>
              <li class="nav-group-task">
                <a href="Classes/ExpandingViewController.html">ExpandingViewController</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <article class="main-content">
        <section>
          <section class="section">
            
            <p><img src="https://raw.githubusercontent.com/Ramotion/expanding-collection/master/header.png" alt="header"></p>
<a href='#expanding_collection' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h1 id='expanding_collection'>expanding-collection</h1>

<p><a href="http://twitter.com/Ramotion"><img src="https://img.shields.io/badge/Twitter-@Ramotion-blue.svg?style=flat" alt="Twitter"></a>
<a href="https://cocoapods.org/pods/expanding-collection"><img src="https://img.shields.io/cocoapods/p/expanding-collection.svg" alt="CocoaPods"></a>
<a href="http://cocoapods.org/pods/expanding-collection"><img src="https://img.shields.io/cocoapods/v/expanding-collection.svg" alt="CocoaPods"></a>
<a href="https://cdn.rawgit.com/Ramotion/expanding-collection/master/docs/index.html"><img src="https://img.shields.io/cocoapods/metrics/doc-percent/expanding-collection.svg" alt="CocoaPods"></a></p>

<p><a href="https://github.com/Ramotion/expanding-collection"><img src="https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat" alt="Carthage compatible"></a>
<a href="https://travis-ci.org/Ramotion/elastic-pull-to-update"><img src="https://travis-ci.org/Ramotion/elastic-pull-to-update.svg?branch=master" alt="Travis"></a>
<a href="https://codebeat.co/projects/github-com-ramotion-expanding-collection"><img src="https://codebeat.co/badges/6a009992-5bf2-4730-aa35-f3b20ce7693d" alt="codebeat badge"></a></p>

<p><a href="https://dribbble.com/shots/2741477-iOS-Expanding-Collection-Open-Source">shot on dribbble</a>:
<img src="https://raw.githubusercontent.com/Ramotion/expanding-collection/master/preview.gif" alt="Animation"></p>

<p>The <a href="https://store.ramotion.com/product/iphone-6-mockups?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=expanding-collection">iPhone mockup</a> available <a href="https://store.ramotion.com/product/iphone-6-mockups?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=expanding-collection">here</a>.</p>
<a href='#requirements' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='requirements'>Requirements</h2>

<ul>
<li>iOS 8.0+</li>
<li>Xcode 7.3</li>
</ul>
<a href='#installation' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='installation'>Installation</h2>

<p>Just add the Source folder to your project.</p>

<p>or use <a href="https://cocoapods.org">CocoaPods</a> with Podfile:
<code>ruby
pod &#39;expanding-collection&#39;
</code>
or <a href="https://github.com/Carthage/Carthage">Carthage</a> users can simply add to their <code>Cartfile</code>:
<code>
github &quot;Ramotion/expanding-collection&quot;
</code></p>
<a href='#usage' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='usage'>Usage</h2>
<pre class="highlight swift"><code><span class="kd">import</span> <span class="kt">ExpandingCollection</span>
</code></pre>
<a href='#create_collectionviewcell' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h4 id='create_collectionviewcell'>Create CollectionViewCell</h4>

<p><img src="https://raw.githubusercontent.com/Ramotion/expanding-collection/master/images/image2.png" alt="cell"></p>

<p>1) Create UICollectionViewCell inherit from <code>BasePageCollectionCell</code> (recommend create cell with xib file)</p>

<p>2) Adding FrontView
  - add a view to YOURCELL.xib and connect it to <code>@IBOutlet weak var frontContainerView: UIView!</code><br>
  - add width, height, centerX and centerY constraints (width and height constranints must equal cellSize)</p>

<p><img src="https://raw.githubusercontent.com/Ramotion/expanding-collection/master/images/image1.png" alt="cell"><br>
  - connect centerY constraint to <code>@IBOutlet weak var frontConstraintY: NSLayoutConstraint!</code>
  - add any desired uiviews to frontView</p>

<p>3) Adding BackView
  - repeat step 2 (connect outlets to <code>@IBOutlet weak var backContainerView: UIView!</code>, <code>@IBOutlet weak var backConstraintY: NSLayoutConstraint!</code>)</p>

<p>4) Cell example <a href="https://github.com/Ramotion/expanding-collection/tree/master/DemoExpandingCollection/DemoExpandingCollection/ViewControllers/DemoViewController/Cells">DemoCell</a></p>
<a href='#if_set_code_tag_101_code_for_any_code_frontview_subviews_code_this_view_will_be_hidden_during_the_transition_animation' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h6 id='if_set_code_tag_101_code_for_any_code_frontview_subviews_code_this_view_will_be_hidden_during_the_transition_animation'>If set <code>tag = 101</code> for any <code>FrontView.subviews</code> this view will be hidden during the transition animation</h6>
<a href='#create_collectionviewcontroller' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h4 id='create_collectionviewcontroller'>Create CollectionViewController</h4>

<p>1) Create a UIViewController inheriting from <code>ExpandingViewController</code></p>

<p>2) Register Cell and set Cell size:</p>
<pre class="highlight swift"><code><span class="k">override</span> <span class="kd">func</span> <span class="nf">viewDidLoad</span><span class="p">()</span> <span class="p">{</span>
    <span class="n">itemSize</span> <span class="o">=</span> <span class="kt">CGSize</span><span class="p">(</span><span class="nv">width</span><span class="p">:</span> <span class="mi">214</span><span class="p">,</span> <span class="nv">height</span><span class="p">:</span> <span class="mi">264</span><span class="p">)</span>
    <span class="k">super</span><span class="o">.</span><span class="nf">viewDidLoad</span><span class="p">()</span>

    <span class="c1">// register cell</span>
    <span class="k">let</span> <span class="nv">nib</span> <span class="o">=</span> <span class="kt">UINib</span><span class="p">(</span><span class="nv">nibName</span><span class="p">:</span> <span class="s">"NibName"</span><span class="p">,</span> <span class="nv">bundle</span><span class="p">:</span> <span class="kc">nil</span><span class="p">)</span>
    <span class="n">collectionView</span><span class="p">?</span><span class="o">.</span><span class="nf">registerNib</span><span class="p">(</span><span class="n">nib</span><span class="p">,</span> <span class="nv">forCellWithReuseIdentifier</span><span class="p">:</span> <span class="s">"CellIdentifier"</span><span class="p">)</span>
<span class="p">}</span>
</code></pre>

<p>3) Add UICollectionViewDataSource methods</p>
<pre class="highlight swift"><code><span class="kd">extension</span> <span class="kt">YourViewController</span> <span class="p">{</span>

  <span class="k">override</span> <span class="kd">func</span> <span class="nf">collectionView</span><span class="p">(</span><span class="nv">collectionView</span><span class="p">:</span> <span class="kt">UICollectionView</span><span class="p">,</span> <span class="n">numberOfItemsInSection</span> <span class="nv">section</span><span class="p">:</span> <span class="kt">Int</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">Int</span> <span class="p">{</span>
    <span class="k">return</span> <span class="n">items</span><span class="o">.</span><span class="n">count</span>
  <span class="p">}</span>

  <span class="k">override</span> <span class="kd">func</span> <span class="nf">collectionView</span><span class="p">(</span><span class="nv">collectionView</span><span class="p">:</span> <span class="kt">UICollectionView</span><span class="p">,</span> <span class="n">cellForItemAtIndexPath</span> <span class="nv">indexPath</span><span class="p">:</span> <span class="kt">NSIndexPath</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">UICollectionViewCell</span> <span class="p">{</span>
    <span class="k">let</span> <span class="nv">cell</span> <span class="o">=</span> <span class="n">collectionView</span><span class="o">.</span><span class="nf">dequeueReusableCellWithReuseIdentifier</span><span class="p">(</span><span class="s">"CellIdentifier"</span><span class="p">),</span> <span class="nv">forIndexPath</span><span class="p">:</span> <span class="n">indexPath</span><span class="p">)</span>
    <span class="c1">// configure cell</span>
    <span class="k">return</span> <span class="n">cell</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre>

<p>4) Open Cell animation</p>
<pre class="highlight swift"><code><span class="k">override</span> <span class="kd">func</span> <span class="nf">viewDidLoad</span><span class="p">()</span> <span class="p">{</span>
    <span class="n">itemSize</span> <span class="o">=</span> <span class="kt">CGSize</span><span class="p">(</span><span class="nv">width</span><span class="p">:</span> <span class="mi">214</span><span class="p">,</span> <span class="nv">height</span><span class="p">:</span> <span class="mi">264</span><span class="p">)</span>
    <span class="k">super</span><span class="o">.</span><span class="nf">viewDidLoad</span><span class="p">()</span>

    <span class="c1">// register cell</span>
    <span class="k">let</span> <span class="nv">nib</span> <span class="o">=</span> <span class="kt">UINib</span><span class="p">(</span><span class="nv">nibName</span><span class="p">:</span> <span class="s">"CellIdentifier"</span><span class="p">,</span> <span class="nv">bundle</span><span class="p">:</span> <span class="kc">nil</span><span class="p">)</span>
    <span class="n">collectionView</span><span class="p">?</span><span class="o">.</span><span class="nf">registerNib</span><span class="p">(</span><span class="n">nib</span><span class="p">,</span> <span class="nv">forCellWithReuseIdentifier</span><span class="p">:</span> <span class="kt">String</span><span class="p">(</span><span class="kt">DemoCollectionViewCell</span><span class="p">))</span>
<span class="p">}</span>
</code></pre>
<pre class="highlight swift"><code><span class="kd">func</span> <span class="nf">collectionView</span><span class="p">(</span><span class="nv">collectionView</span><span class="p">:</span> <span class="kt">UICollectionView</span><span class="p">,</span> <span class="n">didSelectItemAtIndexPath</span> <span class="nv">indexPath</span><span class="p">:</span> <span class="kt">NSIndexPath</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">cell</span><span class="o">.</span><span class="nf">cellIsOpen</span><span class="p">(</span><span class="o">!</span><span class="n">cell</span><span class="o">.</span><span class="n">isOpened</span><span class="p">)</span>
<span class="p">}</span>
</code></pre>
<a href='#if_you_use_this_delegates_method' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h6 id='if_you_use_this_delegates_method'>if you use this delegates method:</h6>
<pre class="highlight plaintext"><code>func collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath)

func scrollViewDidEndDecelerating(scrollView: UIScrollView)
</code></pre>
<a href='#must_call_super_method' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h6 id='must_call_super_method'>must call super method:</h6>
<pre class="highlight plaintext"><code>func collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) {
  super.collectionView(collectionView: collectionView, willDisplayCell cell: cell, forItemAtIndexPath indexPath: indexPath)
  // code
}

func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
  super.scrollViewDidEndDecelerating(scrollView: scrollView)
  // code
}
</code></pre>
<a href='#transition_animation' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h4 id='transition_animation'>Transition animation</h4>

<p>1) Create a UITableViewController inheriting from <code>ExpandingTableViewController</code></p>

<p>2) Set header height default 236</p>
<pre class="highlight swift"><code><span class="k">override</span> <span class="kd">func</span> <span class="nf">viewDidLoad</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">super</span><span class="o">.</span><span class="nf">viewDidLoad</span><span class="p">()</span>
    <span class="n">headerHeight</span> <span class="o">=</span> <span class="o">***</span>
<span class="p">}</span>  
</code></pre>

<p>3) Call the push method in YourViewController to YourTableViewController</p>
<pre class="highlight swift"><code>  <span class="k">if</span> <span class="n">cell</span><span class="o">.</span><span class="n">isOpened</span> <span class="o">==</span> <span class="kc">true</span> <span class="p">{</span>
    <span class="k">let</span> <span class="nv">vc</span><span class="p">:</span> <span class="kt">YourTableViewController</span> <span class="o">=</span> <span class="c1">// ... create view controller  </span>
    <span class="nf">pushToViewController</span><span class="p">(</span><span class="n">vc</span><span class="p">)</span>
  <span class="p">}</span>
</code></pre>

<p>4) For back transition use <code>popTransitionAnimation()</code></p>
<a href='#license' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='license'>License</h2>

<p>Expanding collection is released under the MIT license.
See <a href="./LICENSE">LICENSE</a> for details.</p>
<a href='#about' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='about'>About</h2>

<p>The project maintained by <a href="https://ramotion.com?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=expanding-collection">app development agency</a> <a href="https://ramotion.com?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=expanding-collection">Ramotion Inc.</a>
See our other <a href="https://github.com/ramotion">open-source projects</a> or <a href="https://ramotion.com?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=expanding-collection">hire</a> us to design, develop, and grow your product.</p>

<p><a href="https://twitter.com/intent/tweet?text=https://github.com/ramotion/expanding-collection"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="Twitter URL"></a>
<a href="https://twitter.com/ramotion"><img src="https://img.shields.io/twitter/follow/ramotion.svg?style=social" alt="Twitter Follow"></a></p>

          </section>
        </section>
        <section id="footer">
          <p>&copy; 2016 <a class="link" href="" target="_blank" rel="external">AlexKalinkin</a>. All rights reserved. (Last updated: 2016-06-10)</p>
          <p>Generated by <a class="link" href="https://github.com/realm/jazzy" target="_blank" rel="external">jazzy ♪♫ v0.5.0</a>, a <a class="link" href="http://realm.io" target="_blank" rel="external">Realm</a> project.</p>
        </section>
      </article>
    </div>
  </body>
</div>
</html>
